<template>
  <div>
    姓名：<input v-model="userName"/>{{ userName }}<br/>
    薪水：<input type="number" v-model="salary"/>{{ salary }}<br/>
    <button v-on:click="addSalary">提交</button>
    <button @click="changeShowUserInfo">查看个人信息</button>
    <hr />
    <div class="userInfo" v-if="showUserInfo">
      <h2>个人信息</h2>
      <p>年龄：<input type="number" v-model="userInfo.age"></p>
      <p>性别：<input type="radio" value="1" v-model="userInfo.sex">男</input><input type="radio" value="2" v-model="userInfo.sex">女</input></p>
      <p>岗位：
        <select v-model="userInfo.department">
          <option value="1">开发</option>
          <option value="2">测试</option>
          <option value="3">运维</option>
        </select>
      </p>
      <p>技术：  <span v-for="skill in userInfo.skills" :key="skill">{{ skill }}</span></p>
      <p>新技术：<input v-model="newSkill"/><button @click="addSkill">学习新技术</button></p>
      <p>个人信息汇总 {{ userInfo }}</p>
    </div>
  </div>

</template>
<script lang="ts">
  export default {
    data() {
      return {
        userName: 'tom',
        salary: 15000,
        userInfo: {
          age: 18,
          sex: 1,
          department: 1,
          skills: ['java','python','vue']
        },
        newSkill: '',
        showUserInfo: false
      }
    },
    methods: {
      addSalary() {
        this.salary += 1000
      },
      addSkill() {
        if(this.newSkill){
          this.userInfo.skills.push(this.newSkill)
          this.newSkill = ''
        }
      },
      changeShowUserInfo() {
        this.showUserInfo = !this.showUserInfo
      }
    }
  }
</script>

<style scoped>
.userInfo {
  background-color: aqua;
  width: 90%;
}
.userInfo span {
  background-color: yellow;
  margin-left: 10px;
  border: 1px;
  border-radius: 5px;
}
</style>
